<template>
  <el-table max-height="450" :data="tags">
    <el-table-column label="标签标识" align="center" prop="id"/>
    <el-table-column label="标签名称" align="center" prop="name"/>
    <el-table-column
      label="数据类型"
      align="center"
      prop="valueType.type"
      :filters="utils.getTableFiltersData(dict.type.iot_data_type)"
      :filter-method="utils.filterValueType"
    />
    <el-table-column label="是否只读" align="center" prop="readOnly">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.iot_read_only" :value="scope.row.expands.readOnly"/>
      </template>
    </el-table-column>
    <el-table-column label="描述" align="center" prop="description"/>
    <el-table-column label="标签值" align="center" prop="value"/>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-popover
          placement="bottom"
          width="200"
          trigger="click"
          @hide="handlePopoverHide"
        >
          <div style="text-align: right; margin: 0">
            <el-input placeholder="请输入内容" v-model="value" class="input-with-select">
              <el-button @click="handleAssign(scope.row)" slot="append" icon="el-icon-s-promotion"></el-button>
            </el-input>
          </div>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['iot:device:edit']"
            slot="reference"
          >赋值
          </el-button>
        </el-popover>
        <el-button
          class="button-spacing"
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row)"
          v-hasPermi="['iot:device:edit']"
        >编辑
        </el-button>
        <el-popconfirm
          title="确认删除？"
          @confirm="handleDelete(scope.row)"
        >
          <el-button
            class="button-spacing"
            size="mini"
            type="text"
            icon="el-icon-delete"
            v-hasPermi="['iot:device:remove']"
            slot="reference"
          >删除
          </el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

import { mapState } from 'vuex'
import utils from '@/utils/iot/metadata'
import { addTags } from '@/api/iot/device'

export default {
  name: 'TagsTable',
  // 字典
  dicts: [
    // 数据类型
    'iot_data_type',
    // 是否只读
    'iot_read_only'
  ],
  data() {
    return {
      //标签列表
      tags: [],
      //引用
      utils,
      //标签值
      value: undefined
    }
  },
  computed: {
    ...mapState({
      // 设备详情信息
      deviceDetailInfo: state => state.device.deviceDetailInfo,
      // 设备id
      deviceId: state => state.device.deviceId,
    })
  },

  watch: {
    deviceDetailInfo(data) {
      let metadata = JSON.parse(data.metadata)
      this.tags = metadata.tags
      this.setTags(data.tags)
    }
  },

  created() {
    let metadata = JSON.parse(this.deviceDetailInfo.metadata)
    this.tags = metadata.tags
    this.setTags(this.deviceDetailInfo.tags)
  },

  methods: {
    /** 更新按钮操作 */
    handleUpdate(row) {
      this.$store.dispatch('EditDeviceTags', row.id)
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // 删除标签
      this.$store.dispatch('DeleteDeviceMetadata', { type: 'tags', id: row.id })
    },

    /** 赋值操作 */
    handleAssign(row) {

      const value = this.value

      if (!value) {
        return
      }

      let param = [{ key: row.id, name: row.name, value: value, deviceId: this.deviceId }]

      let id = row.tagValueId

      if (id) {
        param[0].id = id
      }

      addTags(param).then(response => {
        this.$modal.msgSuccess('操作成功')
        this.$store.dispatch('GetDeviceDetailInfo', this.deviceDetailInfo.id)
      })
    },
    /** 获取标签信息 */
    setTags(data) {
      data = data || []
      this.tags.forEach((tag, index) => {
        const id = tag.id
        let findData = data.find(item => id === item.key)
        if (findData) {
          tag.value = findData.value
          tag.tagValueId = findData.id
          this.$set(this.tags, index, tag)
        }
      })
    },
    /** Popover 隐藏时触发 */
    handlePopoverHide() {
      this.value = undefined
    }
  }
}
</script>

<style scoped lang="scss">

// 表格操作按钮间距
.button-spacing {
  margin-left: 10px
}

</style>
